<template>
  <el-container style="min-height: 100vh">
    <el-aside :style="{ width: asideWidth + 'px' }" v-if="menuPosition === 'left'">
      <Aside
          :isCollapse="isCollapse"
          :logoTextShow="logoTextShow"
          :asideWidth="asideWidth"
          :showSearch="showSearch"
      />
    </el-aside>

    <el-container>
      <el-header>
        <Header
            @update-menu-position="handleMenuPositionUpdate"
            @update-layout-format="handleLayoutFormatUpdate"
            @update-page-size="handlePageSizeUpdate"
            @toggle-search="toggleSearch"
            :collapseBtnClass="collapseBtnClass"
            @collapse="collapse"
        />
      </el-header>

      <el-main :class="layoutClass" :style="{ fontSize: pageSize + '%' }">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </el-main>
    </el-container>

    <el-aside :style="{ width: asideWidth + 'px' }" v-if="menuPosition === 'right'">
      <Aside
          :isCollapse="isCollapse"
          :logoTextShow="logoTextShow"
          :asideWidth="asideWidth"
          :showSearch="showSearch"
      />
    </el-aside>
  </el-container>
</template>

<script>
import Header from "@/components/Header";
import Aside from "@/components/Aside";

export default {
  name: "Manage",
  components: { Header, Aside },
  data() {
    return {
      isCollapse: false,
      logoTextShow: true,
      collapseBtnClass: "el-icon-s-fold",
      asideWidth: 280,
      menuPosition: "left",
      layoutFormat: "grid",
      pageSize: 100,
      showSearch: false,
    };
  },
  computed: {
    layoutClass() {
      return this.layoutFormat === "grid" ? "grid-layout" : "flex-layout";
    },
  },
  methods: {
    collapse() {
      this.isCollapse = !this.isCollapse;
      this.asideWidth = this.isCollapse ? 64 : 280;
    },
    handleMenuPositionUpdate(position) {
      this.menuPosition = position;
    },
    handleLayoutFormatUpdate(format) {
      this.layoutFormat = format;
    },
    handlePageSizeUpdate(size) {
      this.pageSize = size;
    },
    toggleSearch(value) {
      this.showSearch = value;
    },
  },
};
</script>

<style scoped>
.grid-layout {
  display: grid;
}

.flex-layout {
  display: flex;
}
</style>
